<template>
	<view class="container">
		<!-- 加入购物车的小球 -->
		<view
			class="good_box"
			v-if="!hide_good_box"
			:style="'left:' + bus_x + 'px;top:' + bus_y + 'px;'"
		>
			<image :src="imgUrl"></image>
		</view>
	</view>
</template>
<script>
import $flyInData from '@/components/fly-in-cart/fly-in-cart.js';
export default {
	data() {
		return {
			count: 0,
			hide_good_box: true,
			finger: {},
			busPos: {},
			bus_x: 0,
			bus_y: 0,
			imgUrl: '',
		};
	},
	props: {
		cartx: {
			//购物车X坐标 在屏幕中的比例 值 0-1 之间
			type: String,
			default: '0',
		},
		carty: {
			//购物车y坐标 在屏幕中的比例 值 0-1 之间
			type: String,
			default: '0',
		},
	},
	created: function () {
		/** 计算购物车的坐标 **/
		var that = this;
		uni.getSystemInfo({
			success: function (res) {
				let ww = res.windowWidth; //取窗口宽度
				let hh = res.windowHeight; //取窗口高度

				//此处可能需要根据设备不同 条件编译一下 偏移值
				let devx = 1; //x偏移值
				let devy = 1; //y偏移值
				// #ifdef APP-PLUS
				devx = 1;
				devy = 0.93;
				// #endif
				// #ifdef MP-WEIXIN
				devx = 1;
				devy = 0.9;
				// #endif
				// #ifdef H5
				devx = 1;
				devy = 1;
				// #endif

				that.busPos['x'] = ww * that.cartx * devx; //根据屏幕大小*cartx购物车X坐标比例 计算购物车实际x坐标
				that.busPos['y'] = hh * that.carty * devy; //根据屏幕大小*carty购物车y坐标比例 计算购物车实际y坐标
			},
		});
		that.count = 0;
	},
	methods: {
		touchOnGoods: function (e, x, y) {
			this.imgUrl = e.currentTarget.dataset.img;
			// 如果good_box正在运动
			if (!this.hide_good_box) return;
			var topPoint = {};
			if (x) {
				this.finger['x'] = x - 13;
				this.finger['y'] = y - 10;
			} else {
				this.finger['x'] = e.touches['0'].clientX - 13; //取点击位置 x坐标
				this.finger['y'] = e.touches['0'].clientY - 10; //取点击位置 y坐标 -10是因为点击位置有些偏移,此数值可根据实际情况自由设置
			}
			if (this.finger['y'] < this.busPos['y']) {
				topPoint['y'] = this.finger['y'] - 150;
			} else {
				topPoint['y'] = this.busPos['y'] - 150;
			}
			topPoint['x'] = Math.abs(this.finger['x'] - this.busPos['x']) / 2;
			/** this.finger['x']是点击位置X坐标  this.busPos['x']是购物车X坐标***/
			if (this.finger['x'] > this.busPos['x']) {
				/* 当点击位置X坐标>购物车X坐标 时 执行 左抛物线 **/
				topPoint['x'] =
					(this.finger['x'] - this.busPos['x']) / 2 + this.busPos['x'];
				/* 贝塞尔算法 创建从购物车到点击位置的 抛物线  抛物线本身并不分左右*/
				this.linePos = $flyInData.bezier(
					[this.busPos, topPoint, this.finger],
					30,
				);
				this.startAnimationLeft(); //逆时针执行抛物线 就形成了 左抛物线
			} else {
				/* 当点击位置X坐标<购物车X坐标 时 执行 右抛物线 **/
				topPoint['x'] =
					(this.busPos['x'] - this.finger['x']) / 2 + this.finger['x'];
				/* 贝塞尔算法 创建从点击位置到购物车的 抛物线  抛物线本身并不分左右*/
				this.linePos = $flyInData.bezier(
					[this.finger, topPoint, this.busPos],
					30,
				);
				this.startAnimationRight(); //顺时针执行抛物线 就形成了 右抛物线
			}
		},
		/* 向右抛物线 根据抛弧线数据 定时器修改good_box style left 和 top 的值来实现动画效果 */
		startAnimationRight: function () {
			var index = 0,
				that = this,
				bezier_points = that.linePos['bezier_points']; //取抛弧线数据
			that.bus_x = that.finger['x'];
			that.bus_y = that.finger['y'];
			that.hide_good_box = false;

			that.timer = setInterval(function () {
				index++;
				that.bus_x = bezier_points[index]['x'];
				that.bus_y = bezier_points[index]['y'];
				if (index >= 28) {
					clearInterval(that.timer);
					(that.hide_good_box = true),
						(that.hideCount = false),
						(that.count = that.count += 1);
				}
			}, 20); // 控制动画运动的时间
		},
		/* 向左抛物线 */
		startAnimationLeft: function () {
			var index = 0,
				that = this,
				bezier_points = that.linePos['bezier_points'];
			that.bus_x = that.finger['x'];
			that.bus_y = that.finger['y'];
			that.hide_good_box = false;
			var len = bezier_points.length;
			index = len;
			that.timer = setInterval(function () {
				index--;
				that.bus_x = bezier_points[index]['x'];
				that.bus_y = bezier_points[index]['y'];
				if (index < 1) {
					clearInterval(that.timer);
					(that.hide_good_box = true),
						(that.hideCount = false),
						(that.count = that.count += 1);
				}
			}, 20); // 控制动画运动的时间
		},
	},
};
</script>
<style lang="scss">
.container {
	.good_box {
		width: 30px;
		height: 30px;
		position: fixed;
		border-radius: 50%;
		overflow: hidden;
		left: 50%;
		top: 50%;
		z-index: +99999;
	}

	.good_box image {
		display: block;
		width: 100%;
		height: 100%;
	}
}
</style>
